<template>
  <div>
    父组件 <br />
    <my-table :data="badMans">
      <!-- slot-scope 固定的, 而scope可以自定义,但是一般不改
          必须通过scope.row 那倒子组件传递过来的值
       -->
      <template slot="xxx" slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <br />
    <hr />
    <br />
    <!-- 新写法 -->
    <my-table :data="badMans">
      <!-- slot-scope 固定的, 而scope可以自定义,但是一般不改
          必须通过scope.row 那倒子组件传递过来的值
       -->
      <template #xxx="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'red' : 'purple' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './MyTable'
export default {
  components: {
    MyTable
  },
  data () {
    return {
      badMans: [
        { id: 1001, name: '尹志平', address: '终南山', tag: '公司' },
        { id: 1002, name: '欧阳锋', address: '西域', tag: '家' },
        { id: 1003, name: '岳不群', address: '华山', tag: '家' },
        { id: 1004, name: '鳌拜', address: '紫禁城', tag: '公司' }
      ]
    }
  }
}
</script>
